<!--排班计划新增/编辑组件-->
<template>
    <div>

        <el-tabs v-model="activeName">
            <el-tab-pane label="排班信息" name="Datas">

                <el-form :model="model" :rules="rules" ref="ruleForm" label-width="100px"
                    class="demo-ruleForm page-form">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="排班编号" prop="PlanCode">
                                <el-input v-model="model.PlanCode" placeholder="请输入排班编号"></el-input>
                            </el-form-item>

                            <el-form-item label="排班名称" prop="PlanName">
                                <el-input v-model="model.PlanName" placeholder="请输入排班名称"></el-input>
                            </el-form-item>

                            <el-form-item label="班组编号" prop="TeamCode">

                                <el-select :value="model.TeamCode" v-loading="TeamisLoading" @change="TeamChange"
                                    @focus="TeamSelect">
                                    <el-option v-for="item in TeamSelectData" :key="item.Id" :label="item.TeamCode"
                                        :value="item">

                                    </el-option>
                                </el-select>

                            </el-form-item>

                            <el-form-item label="班组类别">
                                <el-input v-model="model.TeamType" :disabled="true"></el-input>
                            </el-form-item>

                            <el-form-item label="班组名称">
                                <el-input v-model="model.TeamName" :disabled="true"></el-input>
                            </el-form-item>

                        </el-col>

                        <el-col :span="12">

                            <el-form-item label="轮班时长" prop="ShiftDuration">
                                <el-input-number v-model="model.ShiftDuration" :min="1" :max="12"></el-input-number>
                            </el-form-item>

                            <el-form-item label="轮班方式" prop="ShiftWay" class="vertical-layout" display="block">
                                <el-select v-model="model.ShiftWay" placeholder="请选择轮班方式" allow-create filterable>
                                    <el-option label="白班" value="白班"></el-option>
                                    <el-option label="中班" value="中班"></el-option>
                                    <el-option label="晚班" value="晚班"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="倒班方式" prop="ChangeShiftWay" class="vertical-layout" display="block">
                                <el-select v-model="model.ChangeShiftWay" placeholder="请选择倒班方式" allow-create filterable>
                                    <el-option label="两班倒" value="两班倒"></el-option>
                                    <el-option label="三班倒" value="三班倒"></el-option>
                                    <el-option label="四班倒" value="四班倒"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="开始日期" prop="StartDate">
                                <el-date-picker v-model="model.StartDate" type="datetime"
                                    placeholder="选择日期时间"></el-date-picker>
                            </el-form-item>

                            <el-form-item label="结束日期" prop="EndDate">
                                <el-date-picker v-model="model.EndDate" type="datetime"
                                    placeholder="选择日期时间"></el-date-picker>
                            </el-form-item>

                        </el-col>

                    </el-row>

                    <el-divider></el-divider>

                </el-form>
            </el-tab-pane>
            <el-tab-pane label="人员安排" name="Person">

                <div class="page-tool">
                    <el-button type="primary" plain icon="el-icon-plus" @click="addBom" size="small">新增</el-button>
                    <el-button type="danger" plain icon="el-icon-delete" size="small" @click="delBom">删除</el-button>
                </div>

                <el-table :data="tableData" ref="dataForm" v-loading="isLoading" height="360">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column prop="PersonCode" label="员工编号" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="PlanPersonName" label="员工姓名" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column label="操作" :show-overflow-tooltip="true">
                        <template slot-scope="scope">
                            <el-button type="text" @click="del(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>


        <div style="text-align:right; margin: 10px;">
            <el-button type="primary" @click="submitForm">{{ isUpdate ? '立即保存' : '立即创建' }}</el-button>
            <el-button @click="resetForm">重置</el-button>
        </div>

        <!--弹窗-->
        <el-dialog append-to-body :close-on-click-modal="false" :title="dialogDomain.title"
            :visible.sync="dialogDomain.dialogVisible" width="52%">
            <SelectedPerson :PersonList="tableData" @callback="AddPersonCallBack" v-if="dialogDomain.dialogVisible" />
        </el-dialog>



    </div>
</template>



<script>

import SelectedPerson from './SelectedPerson.vue';
export default {
    components: {
        SelectedPerson
    },
    props: {
        model: {
            require: true,
            type: Object,

        },
        isUpdate: {
            require: true,
            type: Boolean
        }
    },
    data() {
        return {
            activeName: 'Datas',
            TeamSelectData: [],
            pageDomain: {
                PageIndex: 1,
                PageSize: 10,
                TotalCount: 0,
            },
            TeamisLoading: false,
            tableData: [],
            isLoading: false,
            //对话框对象
            dialogDomain: {
                title: '人员选择',
                dialogVisible: false,
            },
            rules: {
                PlanCode: { required: true, message: '请输入排班编号', trigger: 'blur' },
                PlanName: { required: true, message: '请输入排班名称', trigger: 'blur' },
                TeamCode: { required: true, message: '请选择班组编号' },

                ShiftDuration: { required: true, message: '请输入轮班时长', trigger: 'blur' },
                ShiftWay: { required: true, message: '请选择轮班方式' },
                ChangeShiftWay: { required: true, message: '请选择倒班方式' },

                StartDate: { required: true, message: '请选择开始日期' },
                EndDate: { required: true, message: '请选择结束日期' },
            }
        }
    },
    created() {
        if (this.isUpdate)
            this.GetPlanTeambyId(this.model.Id);
    },
    methods: {
        TeamChange(model) {
            this.model.TeamCode = model.TeamCode
            this.model.TeamType = model.TeamType
            this.model.TeamName = model.TeamName
            this.GetTeamMemberbyCodeAsync(this.model.TeamCode)
        },
        //添加人员
        addBom() {
            this.dialogDomain.title = "选择班组人员";
            this.dialogDomain.dialogVisible = true;
        },
        delBom() {
            if (this.$refs.dataForm.selection.length <= 0) {
                this.showNotify('请选择一项');
                return;
            }

            this.$refs.dataForm.selection.forEach(row => {
                const index = this.tableData.indexOf(row);
                this.tableData.splice(index, 1);
            });
        },
        //删除产品BOM组成
        del(model) {
            let index = this.tableData.indexOf(model);
            this.tableData.splice(index, 1);
        },

        submitForm() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {

                    if (this.isUpdate) {
                        this.put();
                    }
                    else {
                        this.add();
                    }

                } else {
                    this.showNotify('请输入必填项');
                    return false;
                }
            });
        },

        resetForm() {
            this.$refs['ruleForm'].resetFields();
        },
        add() {
            this.$http.postForm('/api/PlanTeam', { model: this.model, PersonString: JSON.stringify(this.tableData) }, { loading: this.$loading() })
                .then((res) => {
                    this.$emit('callback');
                })
        },
        //修改
        put() {
            this.$http.putForm('/api/PlanTeam', { model: this.model, PersonString: JSON.stringify(this.tableData) }, { loading: this.$loading() })
                .then((res) => {
                    this.$emit('callback');
                })
        },
        GetPlanTeambyId(Id) {
            this.isLoading = true;
            this.$http.get('/api/PlanTeam/GetPlanTeambyId', {
                params: {
                    PlanTeamId: Id
                }
            })
                .then(res => {
                    console.log(res)
                    this.tableData = res.Data;
                    this.isLoading = false;
                })
        },
        //根据班组编号获取班组附加表
        GetTeamMemberbyCodeAsync(Id) {
            this.isLoading = true;
            this.$http.get('/api/Team/GetTeamMemberbyCodeAsync', {
                params: {
                    TeamCode: Id
                }
            })
                .then(res => {
                    console.log(res)
                    this.isLoading = false
                    res.Data.map(x => {
                        var obj = new Object()
                        //处理所需字段
                        this.$set(obj, 'PersonCode', x.PersonCode)
                        this.$set(obj, 'PlanPersonName', x.UserName)
                        this.$set(obj, 'PeopleQuantity', 0)
                        this.tableData.push(obj)
                    })

                })
        },
        //新增或编辑页面回调
        AddPersonCallBack() {
            this.dialogDomain.dialogVisible = false;
        },
        //班组选择下拉框
        TeamSelect() {
            this.TeamisLoading = true
            this.$http.get('/api/Team/GetAll',)
                .then((res) => {
                    this.TeamSelectData = res.Data
                    console.log(res)
                    this.TeamisLoading = false
                })
            this.tableData = []
        }
    }
}
</script>
<style scoped>
.vertical-layout .el-form-item__label {
    display: block !important;
}

.vertical-layout .el-form-item__content {
    display: block !important;
}
</style>